<template>
  <div>
    <div class="headerpart">
      <div class="am-flexbox search-box am-flexbox-align-center">
        <div class="am-flexbox search am-flexbox-align-center">
          <div class="location" @click="getCities">
            <span class="name">上海</span>
            <van-icon name="arrow-down" />
          </div>
          <div class="form">
            <van-icon name="search" />
            <span class="text">请输入小区或地址</span>
          </div>
        </div>
        <van-icon class="mapicont" name="location-o" />
      </div>

      <!-- 轮播图部分 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 小组件部分 -->
    <van-grid>
      <van-grid-item icon="wap-home-o" text="整租" to="/find" />
      <van-grid-item icon="friends-o" text="合租" to="/find" />
      <van-grid-item icon="guide-o" text="地图找房" />
      <van-grid-item icon="shop-collect-o" text="去出租" @click="changepage" />
    </van-grid>
    <!-- 租房小组部分 -->
    <div class="group">
      <p class="group-title">租房小组 <span class="more">更多</span></p>
      <ul class="bodypart">
        <li>
          <div class="am-flexbox groupsFlex am-flexbox-align-center">
            <img
              alt="图片"
              class="left"
              src="http://115.159.87.220:8080/img/groups/1.png"
            />
            <div class="right">
              <p>家住回龙观</p>
              <p>归属的感觉</p>
            </div>
          </div>
        </li>
        <li>
          <div class="am-flexbox groupsFlex am-flexbox-align-center">
            <img
              alt="图片"
              class="left"
              src="http://115.159.87.220:8080/img/groups/2.png"
            />
            <div class="right">
              <p>宜居四五环</p>
              <p>大都市生活</p>
            </div>
          </div>
        </li>
        <li>
          <div class="am-flexbox groupsFlex am-flexbox-align-center">
            <img
              alt="图片"
              class="left"
              src="http://115.159.87.220:8080/img/groups/3.png"
            />
            <div class="right">
              <p>喧嚣三里屯</p>
              <p>繁华的背后</p>
            </div>
          </div>
        </li>
        <li>
          <div class="am-flexbox groupsFlex am-flexbox-align-center">
            <img
              alt="图片"
              class="left"
              src="http://115.159.87.220:8080/img/groups/4.png"
            />
            <div class="right">
              <p>比邻十号线</p>
              <p>地铁心连心</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { gethotCities } from '@/api/houseInfo'
import axios from 'axios'
export default {
  name: 'index-page',
  data () {
    return {
      value: '',
      images: [
        'http://liufusong.top:8080/img/swiper/1.png',
        'http://liufusong.top:8080/img/swiper/2.png',
        'http://liufusong.top:8080/img/swiper/3.png'
      ],
      hotcitylist: []
    }
  },
  methods: {
    async getCities () {
      const { data } = await axios.get('http://liufusong.top:8080/area/hot')
      console.log(data.body)
      this.hotcitylist = data.body
      this.$router.push('/citymessage')
    },
    changepage () {
      this.$router.push('/HouseResources')
    }
  }
}
</script>

<style lang="less" scoped>
.headerpart {
  position: relative;
  .am-flexbox.am-flexbox-align-center {
    position: absolute;
    top: 10px;
    width: 85%;
    padding: 0 10px;
    z-index: 2;
    align-items: center;
  }
  .form {
    padding-left: 15px;
    border-left: 1px solid #ccc;
  }
  .location {
    margin-right: 10px;
  }
  .mapicont {
    position: absolute;
    right: -20px;
    top: 18px;
    font-size: 20px;
  }
}
img {
  width: 100%;
}

.search-box .search {
  flex: 1 1;
  height: 34px;
  margin: 0 10px;
  padding: 5px 5px 5px 8px;
  border-radius: 3px;
  background-color: #fff;
  .am-flexbox.am-flexbox-align-center {
    align-items: center;
  }
}
.group-title {
  height: 50px;
  background-color: #f6f5f6;
  display: flex;
  justify-content: space-between;
  margin: 15px 0 15px 10px;
  font-size: 15px;
  .more span {
    position: absolute;
    color: #787d82;

    font-size: 14px;
    font-weight: 400;
  }
}
.bodypart {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  padding: 0 10px;
}
.am-flexbox {
  display: flex;
  font-size: 14px;

  img {
    width: 50px;
    height: 50px;
    margin: 0 10px;
  }
}
</style>
